<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <link href="css/aa.css" rel="stylesheet"/>
</head>
<body>
<div class="body-scrollbar" style="width: 265px;height:400px;overflow-y: scroll;overflow-x: hidden">

  <div class="m_header">
    <div class="m_header_top">
      网站模板—理财贷款
    </div>
    <div id="m_button" style="position: absolute ;right: 2%;top: 15%;cursor: pointer;">
      <img src="img/m_liebiao.png">
    </div>

  </div>

  <div id="m_navbar">
    <a href="index.html" class="m_navbar_item" style="background: #41474e;">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_home.png">
      </div>
      <div>首页</div>
    </a>
    <a href="about.html" class="m_navbar_item">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_qq.png">
      </div>
      <div>关于我们</div>
    </a>
    <a href="loan.html" class="m_navbar_item">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_loan.png">
      </div>
      <div>贷款专营</div>
    </a>
    <a href="news.html" class="m_navbar_item">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_news.png">
      </div>
      <div>新闻动态</div>
    </a>
    <a href="contact.html" class="m_navbar_item">
      <div style="width: 100%;margin-top: .5rem">
        <img src="./img/m_phone.png">
      </div>
      <div>联系我们</div>
    </a>
  </div>

<!--首页-->
  <div style="margin-top: 2.25rem;position: relative;">
<!--轮播-->
    <div id="index_sub">

      <div style="position: relative;width: 16.1rem;height: 7.8rem;border: 1px solid transparent;overflow: hidden;">

        <ul id="lunbo" style="list-style: none; position: absolute;top: 0;left: 0; width: 35rem;height: 7.8rem;border: 1px solid transparent">
          <li style="float: left">
            <img src="img/mobile_carousel-1.jpg"/>
          </li>
          <li style="float: left">
            <img src="img/mobile_carousel-2.jpg"/>
          </li>
        </ul>

        <!--<div style="position: absolute;top: 80%;left: 50%;width: .35rem;height: .35rem;background: yellow;border-radius: 50% 50%">-->

        <!--</div>-->
        <!--<div style="position: absolute;top: 80%;left: 56%;width: .35rem;height: .35rem;background: red;border-radius: 50% 50%;">-->

        <!--</div>-->

      </div>

      <div style="width: 16.1rem">

        <div style="font-size: .8rem;">
          <div style="width: 16.1rem;color: #333;height: 2rem;line-height: 2rem;background: url('img/m_title.png') no-repeat 0 50%;padding-left: 1.6rem">
            关于我们
          </div>
          <div>
            <img src="img/mobile_carousel-2.jpg"/>
          </div>
        </div>

        <div style="font-size:.8rem">
          <div style="color:#3083eb;font-weight: bold;font-size: 0.8rem;line-height: 2rem;">
            公司蓬勃发展壮大
          </div>
          <div style="color: #666">
            <p>
              限公司（以下简称XXX）成立于2013年5月，是一家专业从事个人与小微企业融资咨询、融资方案策划、融资代办等服务的公司。致力于为有融资需求的客户提供专业的融资咨询、匹配和交易代办服务。
            </p>
          </div>

          <div>
            <img src="img/mobile_carousel-2.jpg"/>
          </div>
        </div>

        <div style="font-size: .8rem;">
          <div style="width: 16.1rem;color: #333;height: 2rem;line-height: 2rem;background: url('img/m_title.png') no-repeat 0 50%;padding-left: 1.6rem">
            常见问题
          </div>
          <div style="position: relative;width: 265px;height: 126px;border: 1px solid transparent">
            <img src="img/mobile_carousel-2.jpg"/>
            <div style="width: 16.6rem;height: 1.3rem;line-height: 1.3rem;background: rgba(0,0,0,.7);color:#fff;position: absolute;top: 85%;left: 0;">
              车贷申请必须提供担保吗？
            </div>
          </div>
        </div>

        <div class="scrollbar" style="width: 16.1rem;overflow-x:scroll;font-size: .8rem">
          <div style="width: 16.1rem;color: #333;height: 2rem;line-height: 2rem;background:url('img/m_title.png') no-repeat 0 50%;padding-left: 1.6rem">
            新闻咨询
          </div>

          <div style="width: 35rem;">
            <div style="float: left;width: 13rem;height: 14.1rem;">
              <div>
                <img src="img/m.news1.jpg" style="width:12.5rem; height:7.8rem" >
              </div>
              <div style="line-height: 2.3rem;height: 2.3rem">
                我们贷款的信用额度是多少?
              </div>
              <div  style="height: 2rem;overflow:hidden ;color: #666666">
                各家银行给出的信用贷款额度都不一样。中国银行个人信用最高贷30万元；兴业银行最高可贷50万元；招商银行最高额度80...
              </div>
            </div>

            <div style="float: left;width: 13rem;height: 14.1rem;">
              <div>
                <img src="img/m.news1.jpg" style="width:12.5rem; height:7.8rem" >
              </div>
              <div style="line-height: 2.3rem;height: 2.3rem">
                我们贷款的信用额度是多少?
              </div>
              <div  style="height: 2rem;overflow:hidden ;color: #666666">
                各家银行给出的信用贷款额度都不一样。中国银行个人信用最高贷30万元；兴业银行最高可贷50万元；招商银行最高额度80...
              </div>
            </div>
          </div>

        </div>

      </div>

      <div class="m_footer">
        <div style="text-align: center">
          ©2017 网站模板—理财贷款 版权所有
        </div>
        <div style="text-align: center">
          本站使用 凡科建站 搭建 |电脑版
        </div>
      </div>

    </div>
  </div>

  <div id="m_footer_nav" style="">
    <a class="m_footer_nav_list">
      <div><img src="img/m_phone.png"></div>
      <div style="font-size: .5rem;color: #fff">电话咨询</div>
    </a>

    <a class="m_footer_nav_list">
      <div><img src="img/m_map.png"></div>
      <div style="font-size: .5rem;color: #fff">在线地图</div>
    </a>
    <a href="msg.html" class="m_footer_nav_list">
      <div><img src="img/m_msg2.png"></div>
      <div style="font-size: .5rem;color: #fff">在线留言</div>
    </a>
    <a class="m_footer_nav_list">
      <div><img src="img/m_qq.png"></div>
      <div style="font-size: .5rem;color: #fff">qq交流</div>
    </a>
  </div>

</div>
<script>

  window.onload = function () {
//    轮播
    var ul = document.getElementById("lunbo");
    function lunbo() {
      var aa =  parseInt(ul.style.left);
      aa = aa+(-265);
      if ( aa < -265){
        ul.style.left = 0 +"px";
      }else {
        ul.style.left = aa +"px"
      }
    }
    setInterval(lunbo,3000)

//   侧边栏点击
    var m_navbar = document.getElementById("m_navbar")
    var m_button = document.getElementById("m_button")
    var index_sub = document.getElementById("index_sub")
    var m_footer_nav = document.getElementById("m_footer_nav")
    console.log(m_navbar.offsetLeft)
    m_button.onclick = function () {
      if (m_navbar.offsetLeft == 265){
        m_footer_nav.classList.add("m_footer_nav");
        index_sub.classList.add("index_sub");
        m_navbar.classList.add("m_navbar");
//        m_footer_nav.style.left = -57 + "px"
      }else {
        m_navbar.classList.remove("m_navbar")
        index_sub.classList.remove("index_sub")
        m_footer_nav.classList.remove("m_footer_nav")
//        m_footer_nav.style.left = 0 + "px"
      }
    }
  }
</script>

</body>
</html>
